<script lang="ts" setup>
import type { PropType } from 'vue'
import QIcon from '@/components/q-icon/q-icon.vue'
import DecorateList from './decorateList.vue'
import GoodList from './goodList.vue'
import { useNavBack, useStatusBar } from '@/hooks'
import { doCancelAttentionAndAttention } from '@/apis/concern'
import useCollectionDispatcher from '@/store/dispatcher/useCollectionDispatcher'
import { GetShopInfoRes } from '@/apis/o2oshop/model'
import { Decimal } from 'decimal.js'

const $collectionDispatcherStore = useCollectionDispatcher()
const $props = defineProps({
  shopInfo: {
    type: Object as PropType<GetShopInfoRes & { id: Long }>,
    required: true,
  },
})
const newShopInfo = computed(() => {
  if ($props.shopInfo.no) {
    return {
      ...$props.shopInfo,
      time:
        $props.shopInfo.openTime.start && $props.shopInfo.openTime.end ? `${$props.shopInfo.openTime.start} - ${$props.shopInfo.openTime.end}` : '-',
    }
  }
  return {}
})
const follow = ref(new Decimal($props.shopInfo.follow))
const showShopInfo = ref(false)
const formLabels = [
  {
    key: 'no',
    label: '店铺号',
  },
  {
    key: 'companyName',
    label: '商户',
  },
  {
    key: 'time',
    label: '营业时间',
  },
  {
    key: 'contractNumber',
    label: '联系方式',
  },
  {
    key: 'address',
    label: '地址',
  },
  {
    key: 'briefing',
    label: '店铺介绍',
  },
  {
    key: 'newTips',
    label: '上新公告',
  },
]
const safeHeight = useBottomSafe()
const isConcern = ref($props.shopInfo.isFollow)
// 首页内swiper的index
const tabIdx = ref(0)
const statusBarHeight = useStatusBar()
const merchantNodeHeight = uni.upx2px(300)
const navNodeHeight = uni.upx2px(100)
const customStyle = {
  width: '400rpx',
}
const scrollViewHeight = computed(() => {
  return useScreenHeight().value - merchantNodeHeight - navNodeHeight - statusBarHeight.value - safeHeight.value
})
/**
 * 关注
 */
const handleConcern = async () => {
  var value = isConcern.value
  const { code, msg } = await doCancelAttentionAndAttention($props.shopInfo.name, $props.shopInfo.id, !value, $props.shopInfo.logo)
  if (code !== 200)
    return uni.showToast({
      title: `${msg ? msg : `${value ? '取消' : '关注'}失败`}`,
      icon: 'none',
    })
  uni.showToast({
    title: `${value ? '已取消' : '已关注'}`,
    icon: 'none',
  })
  isConcern.value = !value
  follow.value = follow.value.add(value ? -1 : 1)
  $collectionDispatcherStore.updateShopData()
}
/**
 * 切换tabs
 * @param {*} idx
 */
const handleChangeTab = (idx: number) => {
  tabIdx.value = idx
}
/**
 * 首页swiper切换
 */
const handleChangeSwiper = (e: { detail: { current: number } }) => {
  tabIdx.value = e.detail.current
}
const handleNavBack = () => {
  useNavBack()
}
const contentHeight = useScreenHeight()
const GoodListRef = ref()
const initList = () => {
  GoodListRef.value?.loadMore()
}
</script>

<template>
  <scroll-view scroll-y :style="`height: ${contentHeight}px; position: relative;`" @scrolltolower="initList">
    <!-- 店铺头部 -->
    <!-- TODO: 兼容头部高度处理 -->
    <view
      :style="{
        'background-image': `url(${$props.shopInfo.headBackground})`,
        height: statusBarHeight + merchantNodeHeight + 'px',
        paddingTop: statusBarHeight + 25 + 'px',
      }"
      class="merchant"
    >
      <view class="merchant__fir">
        <view class="merchant__fir-info">
          <q-icon class="merchant__fir-info--nav" color="#f0f0f0" name="icon-xiajiantou" size="30px" @click="handleNavBack" />
          <view class="merchant__fir-info-content" @click.stop="showShopInfo = true">
            <image :src="shopInfo.logo" class="merchant__fir-info-content--img" mode="scaleToFill" />
            <view>
              <view class="merchant__fir-info-content--name">{{ shopInfo.name }}</view>
              <view class="merchant__fir-info-content--sale">{{ follow }}人关注</view>
              <view class="merchant__fir-info-content--sale">{{ shopInfo.productNum }}款在售商品</view>
            </view>
          </view>
        </view>
        <view :class="['merchant__fir-btn', isConcern && 'merchant__fir-btn--active']" @click="handleConcern"> {{ isConcern ? '已' : '' }}关注 </view>
      </view>
      <!-- <u-sticky :h5-nav-height="statusBarHeight" offset-top="0"> -->
      <view class="merchant__sec">
        <view class="tab">
          <view :class="['tab__pane', tabIdx === 0 && 'tab__pane--active']" @click="handleChangeTab(0)">
            <view>首页</view>
          </view>
          <view :class="['tab__pane', tabIdx === 1 && 'tab__pane--active']" @click="handleChangeTab(1)">
            <view>商品</view>
          </view>
        </view>
      </view>
      <!-- </u-sticky> -->
    </view>
    <!-- <swiper easing-function="easeInOutCubic" :current="tabIdx" :style="{ height: `${scrollViewHeight}px` }" @change="handleChangeSwiper">
            <swiper-item> -->
    <DecorateList v-if="tabIdx === 0" :scrollHeight="scrollViewHeight" :shopId="$props.shopInfo.id" />
    <!-- </swiper-item>
            <swiper-item> -->
    <GoodList v-else ref="GoodListRef" :scrollHeight="scrollViewHeight" :shopInfo="$props.shopInfo" />
    <!-- </swiper-item>
        </swiper> -->
    <u-popup v-model="showShopInfo" border-radius="14">
      <view :style="{ paddingTop: statusBarHeight + 'px' }" class="content">
        <view class="content__head">
          <image :src="shopInfo.logo" class="merchant__fir-info-content--img" mode="scaleToFill" />
          <view class="content__head--name fontBold">{{ shopInfo.name }}</view>
        </view>
        <view v-for="(item, index) in formLabels" :key="index" class="content__item">
          <view class="content__item--label">{{ item.label }}</view>
          <view :class="{ 'content__item--newTips': item.key === 'newTips' }" class="fontBold content__item--info">
            {{ newShopInfo[item.key as keyof typeof newShopInfo] ? newShopInfo[item.key as keyof typeof newShopInfo] : '-' }}
          </view>
        </view>
        <!-- 底部按钮占位 -->
        <view style="height: 35px"></view>
        <view class="content__btn">
          <u-button :custom-style="customStyle" size="medium" type="primary" @click="showShopInfo = false">返回 </u-button>
        </view>
      </view>
    </u-popup>
  </scroll-view>
</template>

<style lang="scss" scoped>
@include b(content) {
  margin: 24rpx;
  height: 100%;
  width: 555rpx;
  box-sizing: border-box;
  @include e(head) {
    padding: 20rpx 0;
    @include flex(flex-start);
    @include m(name) {
      margin-left: 20rpx;
    }
  }
  @include e(item) {
    margin-top: 30rpx;
    @include flex(flex-start);
    align-items: flex-start;
    @include m(label) {
      width: 130rpx;
      flex-shrink: 0;
    }
    @include m(info) {
      @include utils-ellipsis(4);
    }
    @include m(newTips) {
      color: #f29100;
    }
  }
  @include e(btn) {
    position: fixed;
    bottom: 30rpx;
    left: 50%;
    transform: translateX(-50%);
  }
}

@include b(merchant) {
  width: 100%;

  box-sizing: border-box;
  position: relative;
  background-repeat: no-repeat;
  z-index: 11;
  background-size: 100% 100%;
  &::after {
    content: ' ';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(17, 17, 17, 0.2);
    z-index: -1;
  }
  @include e(fir) {
    @include flex(space-between);
    padding: 0 14rpx 0 28rpx;
  }
  @include e(fir-btn) {
    width: 126rpx;
    height: 50rpx;
    background: #f12f22;
    border-radius: 32rpx;
    font-size: 28rpx;
    color: #ffffff;
    line-height: 50rpx;
    text-align: center;
    @include m(active) {
      background: #ccc;
    }
  }
  @include e(fir-info) {
    @include flex();
    @include m(nav) {
      transform: rotate(90deg);
    }
  }
  @include e(fir-info-content) {
    margin-left: 16rpx;
    @include flex();
    @include m(img) {
      width: 108rpx;
      height: 108rpx;
      border-radius: 10rpx;
      margin-right: 10rpx;
    }
    @include m(name) {
      font-size: 24rpx;
      color: #fff;
    }
    @include m(sale) {
      color: #fff;
      font-size: 16rpx;
      padding: 12rpx 10rpx;
      // background-color: #fff;
      border-radius: 24rpx;
      margin-top: 10rpx;
      display: inline-block;
    }
  }
  @include e(sec) {
    width: 100%;
    height: 80rpx;
    @include flex(flex-start);
    background-color: rgba($color: #000000, $alpha: 0.2);
  }
  @include e(sec-search) {
    width: 160rpx;
    height: 50rpx;
    border-radius: 32rpx;
    line-height: 50rpx;
    text-align: center;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    margin-left: 28rpx;
  }
}

@include b(tab) {
  @include flex();
  flex-shrink: 0;
  @include e(pane) {
    position: relative;
    padding: 0 20rpx;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 28rpx;
    color: #fff;
    flex-shrink: 0;
    @include m(active) {
      &::after {
        content: '';
        width: 100%;
        height: 4rpx;
        background: #fff;
        border-radius: 2rpx;
        position: absolute;
        bottom: 4rpx;
        left: 0;
      }
    }
  }
}
</style>
